<template>
  <el-breadcrumb separator="/" class="mb-2 mt-1" style="vertical-align: bottom">
    <el-breadcrumb-item>
      <div class="flex align-center">
        <el-icon :size="18"> <Goods /> </el-icon
        ><span class="pl">电商管理</span>
      </div>
    </el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card class="box-card" shadow="hover">
    <template #header>
    <div class="flex justify-end flex-wrap">
      <el-button type="primary" plain>新增</el-button>
    </div>
    </template>
    <el-table
      :data="tableData"
      default-expand-all
      row-key="cat_id"
      style="width: 100%"
    >
      <el-table-column prop="cat_name" label="分類名稱" />
      <el-table-column prop="cat_id" label="ID" />
      <el-table-column prop="sort" label="排序" width="100" />

      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-space>
            <el-button
              link
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >編輯</el-button
            >
            <el-button
              link
              size="small"
              type="danger"
              @click="handleEdit(scope.$index, scope.row)"
              >刪除</el-button
            >
            <el-button
              link
              size="small"
              type="info"
              @click="handleDelete(scope.$index, scope.row)"
              >批量折扣</el-button
            >
            <el-button
              link
              size="small"
              type="warning"
              @click="handleDelete(scope.$index, scope.row)"
              >價格還原</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Goods, ArrowDown } from "@element-plus/icons-vue";
import { $getCat } from "@api/live";
const loading = ref(false);
const tableData = ref([]);
onMounted(() => {
   getData();
});
const getData = async () => {
  loading.value = true;
  let res = await $getCat();
  loading.value = false;
  if (res.code == 0) {
    tableData.value = res.data.table;
  }
};

</script>

<style lang="scss" scoped>

</style>

